<template>
  <div>
    <el-image
      style="width: 100px; height: 100px; margin-left: 50px"
      src="../../../public/image1.png"
    />
    <span style="line-height: 100px; font-weight: bolder; margin: 0 20px">
      房屋编号：{{ data.list[0].houseId }}
    </span>
    <el-button style="background-color: #d6ebd3">空置-已打扫</el-button>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="合同信息" name="first">
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="contractNumber"
          label="合同编号"
          min-width="25%"
        />
        <el-table-column prop="contractType" label="租住方案" min-width="25%" />
        <el-table-column prop="price" label="租金" min-width="25%" />
        <el-table-column
          prop="startTime"
          label="合同开始时间"
          min-width="25%"
        />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="endTime" label="合同结束时间" min-width="25%" />
        <el-table-column label="签订人" min-width="25%">
          <template #default="scope">
            <div v-if="scope.row.userId != null">
              {{ scope.row.user.realName }}
            </div>
            <div v-else>{{ scope.row.enterId }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="user.idCard"
          label="身份证号码"
          min-width="25%"
        />
        <el-table-column prop="user.phone" label="手机号" min-width="25%" />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="startTime" label="签订时间" min-width="25%" />
        <el-table-column prop="startTime" label="生效时间" min-width="25%" />
        <el-table-column prop="houseId" label="租住房屋编号" min-width="25%" />
        <el-table-column
          prop="apartmentInfo.name"
          label="租住房屋公寓"
          min-width="25%"
        />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="user.realName"
          label="紧急联系人"
          min-width="25%"
        />
        <el-table-column prop="user.phone" label="联系电话" min-width="25%" />
        <el-table-column label="身份证照片 正面" min-width="25%">
          <template #default="scope">
            <el-image
              :src="scope.row.user.idCardFront"
              style="height: 40px; width: auto"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="user.idCardBack"
          label="身份证照片 反面"
          min-width="25%"
        >
          <template #default="scope">
            <el-image
              :src="scope.row.user.idCardBack"
              style="height: 40px; width: auto"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="合同附件预览" name="second">
      <iframe
        :src="'https://docs.google.com/viewer?url=' + pdfUrl + '&embedded=true'"
        style="width: 100%; height: 600px"
        frameborder="0"
      ></iframe>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
const data = reactive({
  list: [],
})
var router = useRoute()
// data.list = null
data.list.push(JSON.parse(router.query.rowData))
var pdfUrl = data.list[0].contractStencil
console.log(11111)
console.log(pdfUrl)
</script>
